import React, { Component, createRef } from 'react'

import {
  Form, Input, Button, Card, DatePicker, message

} from 'antd'

import E from "wangeditor"
import moment from "moment"
import {
  getArticleById
} from '../../requests'
import "./edit.less"
const { Item: FormItem } = Form

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
@Form.create()

export default class NormalLoginForm extends Component {
  constructor() {
    super()
    this.editorRef = createRef()
    this.state = {
      content: '',
      title: '',
      author: '',
      createAt: '',
    }
  }
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (err) {
        return message.error("请填写必填字段")
      }
      // const data = {
      //   ...values,
      //   createAt: values.createAt.format()
      // }
      // console.log(data)

      //es6新特性Object.assign
      const data =Object.assign({},values,{
        createAt: values.createAt.format()
      })
      //TODO:post一个接口根据返回的结果跳转到列表
      this.props.history.push("/admin/article/")
      
    })
  }
  initEditor = () => {
    this.editor = new E(this.editorRef.current)
    this.editor.customConfig.onchange = (html) => {
      this.setState({
        content: html
      })
    }
    this.editor.create()
    this.editor.txt.html(this.state.content)
  }

  getData = () => {
    console.log(this.props)
    getArticleById(this.props.match.params.id)
      .then(resp => {
        if (resp.data.code === 200) {
          const {
            content,
            title,
            author,
            createAt
          } = resp.data.data
          console.log({
            author,
            createAt,
            content,
            title
          })
          this.setState({
            content,
            title,
            author,
            createAt
          }, () => {
            this.editor.txt.html(this.state.content)
          })
        }
      })
  }


  componentDidMount() {
    this.getData()
    this.initEditor()
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    console.log();
    return (
      <Card
        title={`编辑《${this.props.location.state.title}》文章`}
        bordered={false}
        style={{ minWidth: "100%", minHeight: "100%", padding: 16, margin: 16 }}
      >
        <Form className="login-form">
          <FormItem
            label="文本标题"

            {...formItemLayout}
          >
            {getFieldDecorator('title', {
              rules:
                [{
                  required: true,
                  message: '请输入文本标题'
                }],
              initialValue: this.state.title
            })(
              <Input placeholder="文本标题" />
            )}
          </FormItem>
          <FormItem
            label="作者"
            {...formItemLayout}
          >
            {getFieldDecorator('author', {
              rules:
                [{
                  required: true,
                  min: 2,
                  max: 6,
                  message: '请输入作者姓名,2-6个字符'
                }],
              initialValue: this.state.author
            })(
              <Input placeholder="作者" />
            )}
          </FormItem>
          <FormItem
            label="创建时间"
            {...formItemLayout}
          >
            {getFieldDecorator('createAt', {
              rules:
                [{
                  required: true,
                  message: '请选择创建时间'
                }],
              initialValue: moment(this.state.createAt)
            })(
              <DatePicker
                showTime
                style={{ width: "100%" }}
              />

            )}
          </FormItem>
          <FormItem
            label="文本内容"
            {...formItemLayout}
            style={{ zIndex: 0 }}
          >
            {getFieldDecorator('content', {
              initialValue: this.state.content
            })(
              <div ref={this.editorRef}></div>
            )}
          </FormItem>

          <FormItem
            wrapperCol={{
              offset: 5
            }}
          >
            <Button type="primary" onClick={this.handleSubmit} className="login-form-button">
              确认新建
          </Button>
          </FormItem>
        </Form>
      </Card>
    )

  }
}
